<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../../plugins/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="../../plugins/axios/axios.min.js"></script>
  <script src="../../js/request.js"></script>
  <title>Title</title>
</head>
<body>
  <div id="app" align="center">
     <div id="main" style="width: 900px;height:600px;"></div>
  </div>
<script>
  new Vue().$mount('#app')
</script>
  <script src="../../api/countSale.js"></script>
  <script src="../../js/echarts.js"></script>
  <script type="text/javascript">
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom,'dark');
    var option;
    option = {
  // 全局调色盘。
    color: [
      '#c23531',
      '#2f4554',
      '#61a0a8',
      '#d48265',
      '#91c7ae',
      '#749f83',
      '#ca8622',
      '#bda29a',
      '#6e7074',
      '#546570',
      '#c4ccd3'
    ],
    legend: {}
    ,
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'line'
      }
    ]
  };
  //发送ajax请求数据
  getCountSale().then(res => {
    if (String(res.code) === '1') {
      this.option.xAxis.data=res.data[0];
      this.option.series[0].data=res.data[1];
      option && myChart.setOption(option);
    } else {
      this.$message.error(res.msg || '操作失败')
    }
  }).catch(err => {
    this.$message.error('请求出错了：' + err)
  })
</script>
</body>
</html>